<template>
  <div class="manual-entry-container">
    <div>
      <ul>
        <li>
          <span class="active">课程编号</span>
          <span>{{coursenumber}} </span>
          <span class="active">课程名称</span>
          <span>{{coursename}}</span>
        </li>
        <li>
          <span class="active">修习类型</span>
          <span>{{studytype}}</span>
          <span class="active">任课教员</span>
          <span>{{teachingfaculty}}</span>
        </li>
		<li>
          <span class="active" style="height:130px;padding-top: 50px;">成绩录入统计</span>

			<span style="padding-top: 12px; border-right:0px">课下作业成绩应录0人 以录10人 未录6人 已审核23人<br><br>
			其中考试成绩应录0人 以录10人 未录6人 已审核23人</span>
			<span style="width: 900px; padding-top: 12px; padding-left: 300px;">课下作业成绩应录0人 以录10人 未录6人 已审核23人<br><br>
			其中考试成绩应录0人 以录10人 未录6人 已审核23人</span>
			 </li>
      </ul>
      <div>
        <div>成绩录入参数信息:</div>
        <div>
          <span>当前课程成绩所用分制: <span>{{centesimalSystem}}</span></span>
          <span>课下作业成绩所占比例: <span>{{proportion}}</span></span>
          <span>期中考试成绩所占比例: <span>{{ratio}}</span></span>
          <span>考试成绩一票否决: <span>{{against}}</span></span>
        </div>
      </div>
      <ul>
        <li>
          <span class="active">序号</span>
          <span class="active">学号[姓名]</span>
          <span class="active">专业班次</span>
          <span class="active">课下作业成绩</span>
          <span class="active">课堂测评成绩</span>
          <span class="active">期中考试成绩</span>
          <span class="active"
            >课终考核成绩
            <span @click="toBarcodeEntry()">扫描条形码录入</span></span
          >
          <span class="active">总评成绩</span>
          <span class="active">成绩性质</span>
        </li>
        <li>
          <div>
            <span>专业班次：</span>
            <span>{{professionaldivisions}}</span>
          </div>
        </li>
        <li v-for="(item,index) in tableData" :key="index">
          <span>{{index+1}}</span>
          <span>{{item.studentid}}【{{item.name}}】 </span>
          <span>{{item.majorclass}}</span>
          <span style="padding-top: 12px">
            <el-input style="width: 60px" size="small" v-model="item.checkusualscore"></el-input>
          </span>
          <span style="padding-top: 12px">
            <el-input style="width: 60px" size="small" v-model="item.checkexperimentscore"></el-input>
          </span>
          <span style="padding-top: 12px">
            <el-input style="width: 60px" size="small" v-model="item.checkmidtermscore"></el-input>
          </span>
          <span></span>
          <span>{{item.scorenumber}}</span>
          <span style="padding-top: 15px">
            <el-select
              v-model="item.viewtype"
              placeholder="请选择"
              size="mini"
              style="width: 88px"
            >
              <el-option
                v-for="(item, index) in achievementNatures"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </span>
        </li>

      </ul>
    </div>
    <div class="button-group" @click="preservePostLists()">
      <div>保存</div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "manualEntry",
		data(){
      		return {
			professionaldivisions:"班次",
			centesimalSystem:"百分aaa制",
			proportion:"12%",
			ratio:"100%",
			against:"啊",
			coursenumber:"265845",
			coursename:"(博士课)话语分aaa析专题研究",
			studytype:"必修",
			teachingfaculty:"(博士课)陈春华",
        	achievementNature: '期末',
        	achievementNatures: [
					{label:'期末',value:'期末'},
					{label:'期中',value:'期中'},
				],
			tableData:[{
				studentid:"111213",
				name:"张三是峰",
				majorclass:"专业一班",
				checkusualscore:"",
				checkexperimentscore:"",
				checkmidtermscore:"",
				scorenumber:"90",
				},
				{
				studentid:"111213",
				name:"张三",
				majorclass:"专业一班",
				checkusualscore:"",
				checkexperimentscore:"",
				checkmidtermscore:"",
				scorenumber:"90",
				}
				]

			}
		},
		methods:{
      	toBarcodeEntry(){
        	this.$router.push('/teacher/courseAchievement/barcodeEntry')
			},

		queryList:function(){


      			return new Promise(() => {
      			queryList(this.$route.query.planid).then(res => {
					  console.log("aaaa")
					this.coursenumber=res.data.data.courseid;
					this.coursename= res.data.data.coursename;
					this.studytype =res.data.data.studytype;
					this.teachingfaculty=res.data.data.teachingfaculty;
					this.centesimalSystem=res.data.data.scoretypecode;
					this.proportion=res.data.data.usualscorerate;
					this.ratio=res.data.data.midtermscorerate;
					this.against=res.data.data.oneticketveto;
					this.professionaldivisions=res.data.data.professionaldivisions
						console.log("bbbb")
        			console.log(res.data.data)
      				})
    			})

    		},
			queryPostList:function(){

      			let pland=this.$route.query.planid;
      			return new Promise(() => {
      			queryPostList(pland).then(res => {
					this.tableData = res.data.data;

					console.log(this.tableData[0].studentid)
					console.log(res.data.data)
      				})
    			})

    		},
			preservePostLists:function(){
				return new Promise(() => {
			  	preservePostList(this.tableData).then(res => {
					this.$message({
              			type: "success",
              			message: "保存成功!"
            		});

      				})
    			})
			}

		},
		mounted() {
			console.log(this.$route.query.planid)
    		this.queryList();
			this.queryPostList();
  		},

  };
</script>

<style scoped lang="less">

.manual-entry-container {
  > div:nth-child(1) {
    width: 1735px;
    height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:nth-child(2n) {
            width: 444px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }
      &:nth-child(3) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 60px;
            &:nth-child(1) {
              width: 144px;
            }
            &:nth-child(2) {
              width: 180px;
            }
            &:nth-child(3) {
              width: 289px;
            }
            &:nth-child(4) {
              width: 196px;
            }
            &:nth-child(5) {
              width: 197px;
            }
            &:nth-child(6) {
              width: 197px;
            }
            &:nth-child(7) {
              width: 198px;
              padding-top: 8px !important;
              > span {
                display: inline-block;
                width: 121px;
                height: 28px;
                border: 1px solid #5230e9;
                background: rgba(235, 230, 255, 1);
                opacity: 1;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
                color: #5230e9;
                line-height: 18px;
                margin-top: 8px;
                padding: 5px 10px;
                cursor: pointer;
              }
            }
            &:nth-child(8) {
              width: 150px;
            }
            &:nth-child(9) {
              width: 182px;
            }
            &.active {
              border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }
          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;
              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }
                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
}
</style>
